<!--  -->
<template>
  <div class="loginbg">
    <div class="btn_tab">
      <span class="regin"  @click="toLogin">注册</span>
    </div>
    <p class="title_welcome">欢迎使用源聚通</p>
    <div class="formBox">
      <van-field v-model="tel" type="tel" placeholder="请填写手机号" />
      <van-field style="margin-top:20px" v-model="password" type="password" placeholder="请设置密码" />
      <van-field style="margin-top:20px" v-model="password2" type="password" placeholder="请再次确认密码" />
      <van-field style="margin-top:20px" v-model="sms" center clearable  placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="danger">获取验证码</van-button>
        </template>
      </van-field>

      <van-field style="margin-top:20px" v-model="tel" type="tel2" placeholder="推荐人手机号（没有可不填写）" />
      <!-- <p class="forget">忘记密码?</p> -->
      <van-checkbox style="margin-top:20px" v-model="agree">我已阅读并同意《用户协议》《隐私协议》</van-checkbox>

      <van-button
        class="btn_charge"
        :disabled="!password||!tel"
        type="danger"
        @click="showTip = true"
      >登录</van-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "regis"
  },
  data() {
    //这里存放数据
    return {
      tel: "",
      tel2: "",
      password: "",
      password2: "",
      agree:false,
      sms:''
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toLogin(){this.$router.push({path:'/login'})

    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */
.loginbg {
  width: 100%;
  height: 100%;
  background: url("../../assets/loginbg.png") no-repeat;
  background-size: 100% 100%;
}
.btn_tab {
  height: 83px;
  width: 100%;
  display: flex;
  align-items: center;
  /* line-height: 83px; */
  /* text-align: right; */
  justify-content: flex-end;
  color: #ff3927;
  font-size: 16px;
  font-weight: 500;
}
.regin {
  padding-right: 30px;
}
.title_welcome {
  font-size: 28px;
  font-weight: 600;
  color: #2d2d2d;
  line-height: 40px;
  padding-left: 30px;
}
.formBox {
  width: 320px;
  /* margin-top: 70px; */
  margin: auto;
  padding-top: 70px;
}
.forget {
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  color: #818181;
  padding-right: 10px;
}
.btn_charge {
  width: 318px;
  height: 50px;
  margin: auto;
  display: block;
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px #ffd9d4;
  margin-top: 50px;
}
</style>